<template>
  <div class="searchResult">
    <!-- 头部 -->
    <van-nav-bar
      fixed
      left-arrow
      :title="$route.query.keyword+'的搜索结果'"
      @click-left="$router.back()"
    />
    <!-- list组件
    loading 控制加载状态，默认是false，加载期间自动设置为true, 结束后需要手动设置为false
    finished 加载完毕标志位 默认是false ,没有数据了 需要设置为true, finished-text文本就会显示
    onLoad 默认进入页面会触发一次, 一次如果数据占不满一屏, 继续执行
    页面触底也会触发load事件
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.art_id"
        :title="item.title"
        @click="$router.push('/article/'+item.art_id)"
      />
    </van-list>
  </div>
</template>

<script>
import { reqGetSearchResult } from '@/api/search'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  created() {
    // console.log(this.$route) // 路由信息对象
    // 获取路由信息对象的参数 如果是?携带参数 this.$route.query.xxx
    // 如果使用的是params传参(/参数) , 路由规则要提前挖坑  this.$route.params.xxx
  },
  methods: {
    async onLoad() {
      const { data: { data: { results }}} = await reqGetSearchResult(this.page, 10, this.$route.query.keyword)
      // console.log(results)
      // 展开追加赋值
      this.list.push(...results)
      // 更新页码
      this.page++
      // 一次请求结束后需要关闭loading
      this.loading = false
      // 没有数据了 设置加载结束
      if (results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.searchResult{
  padding-top: 46px;
}
</style>
